<template>
    <div class="app-container" v-loading="loading">
        <el-form label-width="140px" class="app-content" 
        :rules="rules" :model="formInline" ref="formInline">
            <div class="form-box">
                 <div class="form-title">添加设备</div>
                 <div class="form-item">
                     <div class="form-item-title">
                            <span class="title-level">学校班级</span>
                     </div>
                     <div class="form-content">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="学校名称" prop="schoolName">
                                    <school v-model="formInline.schoolName" style="width:100%" @change='schoolChange'></school>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                            <el-form-item label="安装区域" prop="sArea">
                                    <el-select v-model="formInline.sArea" placeholder="请选择安装区域" style="width:100%;"
                                    @change="changeArea">
                                        <el-option v-for="(item,index) in formInline.sAreaArr" 
                                        :key="index" :label="item.sName" 
                                        :value="item.pId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                            <el-form-item label="选择班级" prop="sClassId" v-if="showClassSelect">
                                    <el-select v-model="formInline.sClassId" placeholder="请选择班级" style="width:100%;">
                                        <el-option v-for="(item,index) in formInline.classArr" 
                                        :key="index" :label="item.sNickName" 
                                        :value="item.pId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                     </div>
                </div>
                <div class="form-item">
                     <div class="form-item-title">
                            <span class="title-level">摄像机信息</span>
                        </div>
                      <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="摄像机视角名称" prop="sAngleView">
                                    <el-popover placement="top-start" trigger="focus"
                                    content="字符长度不大于4位">
                                    <el-input v-model="formInline.sAngleView" slot="reference" placeholder="请输入摄像机视角名称" :maxlength="4"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="摄像机设备序列号" prop="sVideoNumber">
                                    <el-popover placement="top-start" trigger="focus"
                                        content="字符长度不大于20位">
                                        <el-input v-model="formInline.sVideoNumber" slot="reference" placeholder="请输入摄像机设备序列号" :maxlength="20"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                            <el-form-item label="生产厂家" prop="sManuFactory">
                                    <el-select v-model="formInline.sManuFactory" placeholder="请选择生产厂家" style="width:100%;">
                                        <el-option v-for="(item,index) in formInline.sManuFactoryArr" :key="index" :label="item.sManuFactoryName" 
                                        :value="item.sManuFactoryId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="摄像机设备验证码" prop="sVideoCode">
                                    <el-popover placement="top-start" trigger="focus"
                                    content="字符长度不大于20位">
                                    <el-input v-model="formInline.sVideoCode" placeholder="请输入摄像机设备验证码" :maxlength="20" slot="reference"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>
                      </div>
                </div>
                <div class="form-item">
                       <div class="form-item-title">
                            <span class="title-level">NVR设备信息(若无NVR设备无需填写)</span>
                        </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="NVR序列号" prop="sNvrNumber">
                                    <el-popover placement="top-start" trigger="focus"
                                    content="字符长度不大于20位">
                                    <el-input v-model="formInline.sNvrNumber" placeholder="请输入NVR序列号" :maxlength="20" slot="reference"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                    <el-form-item label="NVR设备验证码" prop="sNvrCode">
                                        <el-popover placement="top-start" trigger="focus"
                                            content="字符长度不大于20位">
                                            <el-input v-model="formInline.sNvrCode" placeholder="请输入NVR设备验证码" :maxlength="20" slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                                <el-col :span="12">
                                    <el-form-item label="摄像机对应通道号" prop="sChannelNumber">
                                        <el-popover placement="top-start" trigger="focus"
                                            content="请输入长度不大于6位的数字">
                                        <el-input v-model="formInline.sChannelNumber" placeholder="请输入摄像机对应通道号" slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                        </el-row>
                    </div>
                </div>
                 <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm">取消</el-button>
                                <el-button type="primary" @click="submitForm('formInline')">确认</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import { mapGetters} from 'vuex';
import levelbar from '../../layout/Levelbar';
import school from 'components/SchoolClasss/school';
import {queryClassBySchool, saveLiveDevice, listAreas} from 'api/deviceManagement';
// import validate from '@/utils/validate';
export default {
    name: 'addDeviceList',
    components: {levelbar, school},
    data() {
        // NVR序列号 有的时候，NVR设备验证码 和 摄像机对应通道号 就要都有

        // NVR序列号
        var sNvrNumber = (rule, value, callback) => {
            if (value === ''&& this.formInline.sNvrCode==''&&this.formInline.sChannelNumber=='') {// 都空
                callback();
            } if (value&& this.formInline.sNvrCode&&this.formInline.sChannelNumber) {// 都有
                callback();
            } else {
                if (value) {// 当前有  验证其他两个是不是有 要都有
                    if (this.formInline.sNvrCode=='') {
                        this.$refs.formInline.validateField('sNvrCode');
                    }
                    if (this.formInline.sChannelNumber=='') {
                        this.$refs.formInline.validateField('sChannelNumber');
                    }
                } else {// 当前无  判断其他两个  只有都无 才不提示
                    if (this.formInline.sChannelNumber||this.formInline.sNvrCode) {// 其中一个有
                        callback(new Error('请输入NVR序列号'));
                    } else {
                        // this.$refs.formInline.validateField('sNvrCode');
                        // this.$refs.formInline.validateField('sChannelNumber');
                        callback();
                    }
                }
                // callback();
            }
        };

       // NVR设备验证码
        var sNvrCode = (rule, value, callback) => {
            if (value === ''&& this.formInline.sNvrNumber==''&& this.formInline.sChannelNumber=='') {
                callback();
            } if (value&& this.formInline.sNvrNumber&&this.formInline.sChannelNumber) {
                callback();
            } else {
                if (value) {
                    if (this.formInline.sNvrNumber=='') {
                        this.$refs.formInline.validateField('sNvrNumber');
                    }
                    if (this.formInline.sChannelNumber=='') {
                        this.$refs.formInline.validateField('sChannelNumber');
                    }
                } else {// 当前无  判断其他两个  只有都无 才不提示
                    if (this.formInline.sChannelNumber||this.formInline.sNvrNumber) {// 其中一个有
                        callback(new Error('请输入NVR设备验证码'));
                    } else {
                        // this.$refs.formInline.validateField('sNvrNumber');
                        // this.$refs.formInline.validateField('sChannelNumber');
                        callback();
                    }
                }
            }
        };


       // 摄像机对应通道号
        var sChannelNumber = (rule, value, callback) => {
            if (value === ''&& this.formInline.sNvrNumber==''&& this.formInline.sNvrCode=='') {
                callback();
            } if (value&& this.formInline.sNvrCode&&this.formInline.sNvrNumber) {
                callback();
            } else {
                if (value) {
                    if (this.formInline.sNvrNumber=='') {
                        this.$refs.formInline.validateField('sNvrNumber');
                    }
                    if (this.formInline.sNvrCode=='') {
                        this.$refs.formInline.validateField('sNvrCode');
                    }
                } else {// 当前无  判断其他两个  只有都无 才不提示
                    if (this.formInline.sNvrCode||this.formInline.sNvrNumber) {// 其中一个有
                        callback(new Error('请输入摄像机对应通道号'));
                    } else {
                        // this.$refs.formInline.validateField('sNvrNumber');
                        // this.$refs.formInline.validateField('sNvrCode');
                        callback();
                    }
                }
            }
        };


        return {
            loading: false,
            schoolLoading: false,
            showClassSelect: true, // 默认班级显示
            formInline: {
                schoolName: '',
                sSchoolId: '', // 学校id
                sClassId: '', // 班级id
                sArea: '', // 区域类型id
                sAreaName: '', // 区域类型名称
                sAngleView: '', // 视角名称
                sVideoNumber: '', // 摄像机设备序列号
                sVideoCode: '', // 摄像机设备验证码
                sManuFactory: '', // 生产厂家 1海康摄像头  2大华摄像头
                sNvrNumber: '', // NVR设备序列号
                sNvrCode: '', // NVR设备验证码
                sChannelNumber: '', // 通道号
                schoolNameList: [], // 学校列表
                classArr: [], // 班级列表
                // 安装区域列表
                sAreaArr: [],
                // 生产厂家列表
                sManuFactoryArr: [
                    { sManuFactoryName: '请选择', sManuFactoryId: '' },
                    { sManuFactoryName: '海康', sManuFactoryId: '1' },
                    { sManuFactoryName: '大华', sManuFactoryId: '2' }
                ]
            },
            rules: {
                // sSchoolId: [
                //     { required: true, message: '请输入学校名称'}
                // ],
                schoolName: [
                    { required: true, message: '请输入学校名称'}
                ],
                sArea: [
                    { required: true, message: '请选择安装区域'}
                ],
                sClassId: [
                     { required: true, message: '请选择班级'}
                ],
                sAngleView: [
                    { required: true, message: '请输入摄像机视角名称'},
                     { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                sManuFactory: [
                   { required: true, message: '请选择生产厂家'}
                ],
                sVideoCode: [
                    { required: true, message: '请输入摄像机设备验证码'},
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                sVideoNumber: [
                   { required: true, message: '请输入摄像机设备序列号'},
                   { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                sNvrNumber: [
                   { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' },
                   { validator: sNvrNumber, trigger: 'blur' }
                ],
                sNvrCode: [
                   { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' },
                   { validator: sNvrCode, trigger: 'blur' }
                ],
                sChannelNumber: [
                   { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' },
                   { pattern: /^\d{0,6}$/, trigger: 'blur', message: '请输入长度不大于6位的数字'},
                   { validator: sChannelNumber, trigger: 'blur' }
                ]
              
            }
        }
    },
    created() {
        this.getListAreas();// 获取安装区域
    },
   
    computed: {
        ...mapGetters([
            'uid'
        ])
       

    },
    methods: {
              // 获取学校id
        schoolChange(val) {
            if (val) {
                this.formInline.sSchoolId = val;
                queryClassBySchool(val).then(res => {
                    this.formInline.classArr=res.data.content;
                    this.formInline.classArr.unshift({sNickName: '请选择', pId: ''});
                })
            } else {
                this.formInline.classArr=[];
                this.formInline.sClassId='';
            }
            
        },

        // 获取安装区域
        getListAreas() {
            listAreas().then(res => {
                this.formInline.sAreaArr=res.data.content;
                this.formInline.sAreaArr.unshift({sName: '请选择', pId: ''});
            });
        },
       
    //  点击确定按钮
        submitForm(formInline) {
            this.$refs[formInline].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.saveLiveDevice();// 添加摄像头
                    });
                } else {
                    return false;
                }
            });
        },
        // 重置
        resetForm() {
            this.$router.push({path: '/deviceManagement/eDevice'});
        },
        //  添加摄像头
        saveLiveDevice() {
            this.loading=true;
            let sSchoolId=this.formInline.sSchoolId;// 学校id
            let sClassId='';
            if (this.showClassSelect==true) {
                sClassId=this.formInline.sClassId
            } else {
                sClassId=sSchoolId
            }
            let sArea=this.formInline.sArea;// 区域类型id
            let sAreaNameObj=this.formInline.sAreaArr.find(item => {// 获取区域类型id对应的名字
                return item.pId===sArea;
            })
            let sAreaName=sAreaNameObj.sName;// 区域类型名称
            let sAngleView=this.formInline.sAngleView;// 视角名称
            let sVideoNumber=this.formInline.sVideoNumber;// 摄像机设备序列号
            let sVideoCode=this.formInline.sVideoCode;// 摄像机设备验证码
            let sManuFactory=this.formInline.sManuFactory;// 生产厂家 1海康摄像头  2大华摄像头
            let sNvrNumber=this.formInline.sNvrNumber;// NVR设备序列号
            let sNvrCode=this.formInline.sNvrCode;// NVR设备验证码
            let sChannelNumber=this.formInline.sChannelNumber;// 通道号
            saveLiveDevice(
                sSchoolId,
                sClassId, 
                sArea, 
                sAreaName,
                sAngleView,
                sVideoNumber,
                sVideoCode, 
                sManuFactory, 
                sNvrNumber,
                sNvrCode,
                sChannelNumber
            ).then(response => {
                this.loading=false;
                this.$store.dispatch('UpdateCache'); 
                this.$message.success('添加成功!');
                this.$refs.formInline.resetFields();
                this.$router.push({path: '/deviceManagement/eDevice'});
                this.clearData();
            }).catch(() => {
                this.loading=false;
            });
        },
        // 清空数据
        clearData() {
            this.formInline.sSchoolId='';// 学校id
            this.formInline.sClassId=''; // 班级id
            this.formInline.sArea=''; // 区域类型id
            this.formInline.sAreaName=''; // 区域类型名称
            this.formInline.sAngleView=''; // 视角名称
            this.formInline.sVideoNumber=''; // 摄像机设备序列号
            this.formInline.sVideoCode=''; // 摄像机设备验证码
            this.formInline.sManuFactory=''; // 生产厂家 1海康摄像头  2大华摄像头
            this.formInline.sNvrNumber=''; // NVR设备序列号
            this.formInline.sNvrCode=''; // NVR设备验证码
            this.formInline.sChannelNumber=''; // 通道号
        },
        // 改变安装区域 控制选择班级的显示隐藏
        changeArea(areaId) {
            let obj=this.formInline.sAreaArr.find(item => {// 获取当前选中的对象
                return item.pId==areaId;
            })
            this.showClassSelect=obj.sName==='教学区域'?true:false;// 如果教学区域（121000）就显示
            if (this.showClassSelect) {
                this.formInline.sClassId='';
                if (this.formInline.sSchoolId) {
                    queryClassBySchool(this.formInline.sSchoolId).then(res => {
                        this.formInline.classArr=res.data.content;
                        this.formInline.classArr.unshift({sNickName: '请选择', pId: ''});
                    })
                }
            }           
        }
        // 返回上一页
        // resetForm() {
        //     this.$router.go(-1);
        // }
    }
}
</script>

<style lang="scss" scoped>
.el-date-editor.el-input {
    width: 100% !important;
}
$bgcolor: #fff;
@mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    }
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form {
       .form-title {
           padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
        }
        .box {
            padding-bottom: 10px;
            background: #fff;
        }
    }
     .form-item {
        padding-bottom: 40px;
        }
         .footer {
          text-align: center;
          margin-top: 40px;
        }
}
</style>
